<template>
    <div class="login-container">
        <div class="login-panel">
            <el-form ref="ruleFormRef" :model="formData" status-icon label-width="80px" :rules="rules">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="formData.username" autocomplete="off">
                        <template #prefix>
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formData.password" type="password" autocomplete="off">
                        <template #prefix>
                            <el-icon>
                                <EditPen />
                            </el-icon>
                        </template></el-input>
                </el-form-item>
              
                <el-form-item>
                    <el-button type="primary" style="width:100%" @click="login">登录</el-button>

                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance } from "vue";
import { useRouter } from 'vue-router';
import {LOGIN_POST,USERINFO_GET} from '../../api/index'
import {useStore } from 'vuex'
import {setToken} from '../../utils/unit'

//获取当前组件路由实例
const router = useRouter()
//获取vuex实例
const store=useStore()
//获取表单实例
const ruleFormRef = ref()
const { proxy } = getCurrentInstance() // 1.获取proxy实例
//密码自定义校验
const passwordReg = (rule, value, callback) => {
    // var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/
    // if (reg.test(value)) {
    //     callback()
    // } else {
    //     callback(new Error('密码是字母数字组合,6-12位'))
    // }
    callback()
}
//验证规则
const rules = reactive({
    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    password: [{ required: true, message: '密码不能为空', trigger: 'blur' }, { validator: passwordReg, trigger: 'blur' }],
})
const formData = reactive({
    username:  '',
    password:  '',
    
})
//登录
const login = () => {
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            proxy.$request({
                url: LOGIN_POST,
                method: 'post',
                data: {
                    username: formData.username,
                    password: formData.password,
                }
            }).then((res) => {
                if (res.code===200) {
                    let token=res.data.tokenHead+res.data.token
                    setToken(token,30)
                    store.dispatch('getUserInfo').then((res)=>{
                        router.push('/index')
                    })
                   
                   
                  
                }
            })
            
        }
    })
}

</script>
<style scoped lang="scss">
.login-container {
    width: 100%;
    height: 100%;
    background: url("../../assets/background.jpg") no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    position: relative;
}

.login-panel {
    position: absolute;
    opacity: 0.8;
    top: 30%;
    right: 20%;
}

.el-input {
    width: 250px;
}

.login-title {
    padding: 10px 0px;
    width: 100%;
    text-align: center;
    color: #eeeeee;
}

:deep(.el-form-item__label)  {
    color: #ffffff;
}

.checkcode {
    height: 32px;
    margin-left: 10px;
}
</style>